<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="format-detection" content="telephone=no">
		<meta name="description" content="">
		<title></title>
		<link rel="stylesheet" href="../imgv2/css/default.min.css" />
		<link rel="stylesheet" href="../jsv2/bootstrap/css/bootstrap-ico.css" />
		<style>
			.title {
				height: 32px;
				line-height: 32px;
				background-color: rgba(150, 204, 112, 1);
				color: rgba(255, 255, 255, 1);
				font-size: 13px;
			}
			.search-containter {
				white-space: nowrap;
				padding-top: 5px;
				padding-bottom: 5px;
				height: 48px;
				border: 1px solid rgba(225, 226, 228, 1);
				margin: 20px;
				border-radius: 5px;
			}
			.search-containter > *:not(button) {
				display: inline-block;
				height: inherit;
				margin: 0px;
				padding: 0px;
			}
			.glyphicon-map-marker {
				color: rgba(242, 179, 133, 1);
			}
			.search-containter .search-logo {
				border-right: 1px solid rgba(241, 241, 242, 1);
				padding-right: 12px;
				height: 70%;
			}
			#txtSearchKeys {
				height: 90%;
				border: 0px;
				width: 50%;
				text-indent: 0.5em;
			}
			.address-list {
				margin-left: 10px;
				margin-right: 10px;
				border-top: 1px solid rgba(245, 245, 245, 1);
				padding-left: 10px;
				padding-right: 10px
			}
			.address-list li {
				height: 64px;
				border-bottom: 1px solid rgba(225, 225, 225, 1);
			}
			.address-list li >* {
				display: inline-block;
				width: 100%;
			}
			.address-list li > em {
				margin-top: 10px;
				line-height: 20px;
				font-size: 16px;
			}
			.address-list li > span {
				line-height: 24px;
				color: rgba(168, 168, 168, 1);
			}
			#mapContainer {
				display: none;
			}
			.txt-address {
				cursor: pointer;
			}
			#result {
				max-height: 300px;
				position: absolute;
				background-color: rgba(255, 255, 255, 1);
				border: 1px solid rgba(222, 222, 222, 1);
				border-radius: 3px;
				display: none;
				height: 100%;
			}
		</style>
	</head>

	<body>
		<div id="headerview" style="height: 44px;">
			<div class="cm-header cm-header--no-right" id="ui-view-16">
				<span class="cm-header-icon fl js_back">

          			<i class="icon-back"></i>

      			</span>
				<h1 class="cm-page-title js_title">选择目的地</h1>
			</div>
		</div>
		<div class="search-containter">
			<div class="search-logo">
				<i class="glyphicon glyphicon-map-marker"></i>
				<span id="txtCity" class="txt-address" data-citycode='021'>上海</span>
			</div>
			<input type="text" id="txtSearchKeys" />
			<div id="result" name="result"></div>
			<button id="btnSearch" class="btn btn-success">搜索</button>
		</div>
		<div id="mapContainer"></div>
		<div class="address-list">
			<ul>
			</ul>
		</div>
		<div class="iframe-containter">
		</div>
	</body>
	<script src="../jsv2/jQuery/jquery-1.11.2.min.js"></script>
	<script src="http://webapi.amap.com/maps?v=1.3&key=57c58c7b1f94514317df97e3a985962c"></script>
	<script src="../jsv2/journey/operateData.js"></script>
	<script src="../jsv2/AMapCommon.js"></script>
	<script>
		var parentwin = window.parent,
			city = {},
			kmap;
		$(function() {
			var p = $('#txtSearchKeys').position();
			$('#result').css({
				//'left': $('.search-containter').position().left + 'px',
				'top': p.top + 41 + 'px',
				'width': $('.search-containter').width()
			});
			$('#btnSearch').on('click', function() {
				if ($('#txtSearchKeys').val() == '') {
					return false;
				}
				kmap.placeSearch($('#txtSearchKeys').val(), $('.txt-address').data('citycode'), function(status, result) {
					var lis = [],
						li;
					if (status === 'complete' && result.info === 'OK') {
						var d, l = result.poiList.pois.length;
						for (var i = 0; i < l; i++) {
							d = result.poiList.pois[i];
							lis.push($('<li>').html('<em>' + d.name + '</em><span>' + d.address + '</span>').data('address', d));
						}
						l == 0 ? lis.push($('<li>').html("π__π 亲,人家找不到结果!<br />要不试试：<br />1.请确保所有字词拼写正确<br />2.尝试不同的关键字<br />3.尝试更宽泛的关键字")) : '';
					} else {
						lis.push($('<li>').html("π__π 亲,人家找不到结果!<br />要不试试：<br />1.请确保所有字词拼写正确<br />2.尝试不同的关键字<br />3.尝试更宽泛的关键字"));
					}
					$('.address-list ul').empty().append(lis);
				});
			});
			$('.txt-address').on('click', function() {
				setIframeSrc('city_list.html');
			});
			$('.address-list').on('click', 'li', function(e) {
				var tar = $(e.target);
				tar = tar[0].tagName == 'LI' ? tar : tar.parent();
				var address = tar.data('address');
				address['city'] = city;
				parentwin && parentwin.setIframeContentValue('txtJourneyDestination', address.name, {
					address: address
				});
			});
			//初始化地图
			kmap = new KAMap({
				render: 'mapContainer'
			});
			kmap.mapInit();
			//$('#txtSearchKeys').focus();//默认页面加载的时候就将焦点定位
			$(document).on('keydown', function(e) {
				if (e.keyCode == 13) { //回车事件
					$('#btnSearch').click();
				}
			});
			$('#txtSearchKeys').on('keyup', function(e) {
				keydown(e);
			});
		});

		function setIframeContentValue(value) {
			$('.txt-address').html(value);
			kmap.getCityCode(value, function(result) {
				city = result;
				$('.txt-address').data('citycode', city.citycode);
			});
			closeIframeContent();
		}

		function keydown(event) {
			var key = (event || window.event).keyCode;
			var result = document.getElementById("txtSearchKeys")
			var cur = result.curSelect;
			if (key === 40) { //down
				if (cur + 1 < result.childNodes.length) {
					if (result.childNodes[cur]) {
						result.childNodes[cur].style.background = '';
					}
					result.curSelect = cur + 1;
					result.childNodes[cur + 1].style.background = '#CAE1FF';
					document.getElementById("txtSearchKeys").value = result.tipArr[cur + 1].name;
				}
			} else if (key === 38) { //up
				if (cur - 1 >= 0) {
					if (result.childNodes[cur]) {
						result.childNodes[cur].style.background = '';
					}
					result.curSelect = cur - 1;
					result.childNodes[cur - 1].style.background = '#CAE1FF';
					document.getElementById("txtSearchKeys").value = result.tipArr[cur - 1].name;
				}
			} else if (key === 13) {
				var res = document.getElementById("txtSearchKeys");
				if (res && res['curSelect'] !== -1) {
					selectResult(document.getElementById("txtSearchKeys").curSelect);
				}
			} else {
				autoSearch();
			}
		}

		function autoSearch() {
				var keywords = document.getElementById("txtSearchKeys").value;
				var cityName = $("#txtCity").html();
				if (cityName == null || cityName.trim() == "") {
					alert("请先输入城市!");
					return false;
				}
				kmap.autoSearch(keywords, cityName, autocomplete_CallBack);
			}
			//输出输入提示结果的回调函数

		function autocomplete_CallBack(status, data) {
				var resultStr = "";
				var tipArr = data.tips;
				if (tipArr && tipArr.length > 0) {
					for (var i = 0; i < tipArr.length; i++) {
						resultStr += "<div id='divid" + (i + 1) + "' onmouseover='openMarkerTipById(" + (i + 1) + ",this)' onclick='selectResult(" + i + ")' onmouseout='onmouseout_MarkerStyle(" + (i + 1) + ",this)' style=\"font-size: 13px;cursor:pointer;padding:5px 5px 5px 5px;\"" + "data=" + tipArr[i].adcode + ">" + tipArr[i].name + "<span style='color:#C1C1C1;'>" + tipArr[i].district + "</span></div>";
					}
				} else {
					resultStr = " π__π 亲,人家找不到结果!<br />要不试试：<br />1.请确保所有字词拼写正确<br />2.尝试不同的关键字<br />3.尝试更宽泛的关键字";
				}
				document.getElementById("result").curSelect = -1;
				document.getElementById("result").tipArr = tipArr;
				document.getElementById("result").innerHTML = resultStr;
				document.getElementById("result").style.display = "block";
			}
			//输入提示框鼠标滑过时的样式

		function openMarkerTipById(pointid, thiss) { //根据id打开搜索结果点tip 
				thiss.style.background = '#CAE1FF';
			}
			//输入提示框鼠标移出时的样式

		function onmouseout_MarkerStyle(pointid, thiss) { //鼠标移开后点样式恢复 
			thiss.style.background = "";
		}

		function selectResult(index) {
				if (index < 0) {
					return;
				}
				if (navigator.userAgent.indexOf("MSIE") > 0) {
					document.getElementById("txtSearchKeys").onpropertychange = null;
					document.getElementById("txtSearchKeys").onfocus = focus_callback;
				}
				//截取输入提示的关键字部分
				var text = document.getElementById("divid" + (index + 1)).innerHTML.replace(/<[^>].*?>.*<\/[^>].*?>/g, "");
				var cityCode = document.getElementById("divid" + (index + 1)).getAttribute('data');
				document.getElementById("txtSearchKeys").value = text;
				document.getElementById("result").style.display = "none";
				//根据选择的输入提示关键字查询
				kmap.mapObj.plugin(["AMap.PlaceSearch"], function() {
					var msearch = new AMap.PlaceSearch(); //构造地点查询类
					AMap.event.addListener(msearch, "complete", placeSearch_CallBack); //查询成功时的回调函数
					msearch.setCity(cityCode);
					msearch.search(text); //关键字查询查询
				});
			}
			//输出关键字查询结果的回调函数

		function placeSearch_CallBack(data) {
			//清空地图上的InfoWindow和Marker
			windowsArr = [];
			marker = [];
			kmap.mapObj.clearMap();
			var resultStr1 = "";
			var poiArr = data.poiList.pois;
			var resultCount = poiArr.length;
			for (var i = 0; i < 1; i++) {
				latLon = poiArr[i].location;
				resultStr1 += "<div id='divid" + (i + 1) + "' onmouseover='openMarkerTipById1(" + i + ",this)' onmouseout='onmouseout_MarkerStyle(" + (i + 1) + ",this)' style=\"font-size: 12px;cursor:pointer;padding:0px 0 4px 2px; border-bottom:1px solid #C1FFC1;\"><table><tr><td><img src=\"http://webapi.amap.com/images/" + (i + 1) + ".png\"></td>" + "<td><h3><font color=\"#00a6ac\">名称: " + poiArr[i].name + "</font></h3>";
				resultStr1 += kmap.tipContents(poiArr[i].type, poiArr[i].address, poiArr[i].tel) + "</td></tr></table></div>";
				//kmap.addmarker(i, poiArr[i]);
			}
			kmap.mapObj.setFitView();
		}
	</script>

</html>